<!DOCTYPE HTML>

<html>
  <head>
    <meta http-equiv="pragma" content="NO-CACHE"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Org Vault</title>
    <link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.8.16.custom.css"/>
    <link rel='stylesheet' type='text/css' href='/js-ext/dynatree-1.2.0/skin/ui.dynatree.css'>
    <link rel="stylesheet" type="text/css" href="/css/orgVault.css" />
    <link rel="stylesheet" type="text/css" href="/js-ext/jquery.contextMenu-1.01/jquery.contextMenu.css" />
    
    <style type="text/css" title="currentStyle">
        @import "/js-ext/DataTables-1.8.2/media/css/demo_table.css";
    </style>
</head>

<body>
<!--     
    In production it is better to get these from google, and to get the minimized versions.
    In development it is nice to use the local versions so that you can code with no
    internet connection.
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
-->

<script src="/js-ext/jquery-1.7.js"></script>
<script src="/js-ext/beta1-jquery.tmpl.js"></script>
<script src="/js-ext/jquery-validation-1.8.1/jquery.validate.js"></script>
<script src="/js-ext/jquery-jquery-datalink-cc4a803/jquery.datalink.js"></script>
<script src="/js-ext/jquery-ui-1.8.16.custom/jquery-ui-1.8.16.custom.min.js"></script>

<script>if ( typeof window.JSON === 'undefined' ) { document.write('<script src="/js-ext/history.js-1.7.1/uncompressed/json2.js"><\/script>'); }</script>  
<script src="/js-ext/history.js-1.7.1/bundled/html4+html5/jquery.history.js"></script>
  
<script src='/js-ext/dynatree-1.2.0/jquery.cookie.js' type="text/javascript"></script>
<script src='/js-ext/dynatree-1.2.0/jquery.dynatree.js' type="text/javascript"></script>
<script src='/js-ext/textlimit.js' type="text/javascript"></script>
<script src='/js-ext/jquery.contextMenu-1.01/jquery.contextMenu-custom.js' type="text/javascript"></script>
<script src="/js-ext/DataTables-1.8.2/jquery.dataTables.js" type="text/javascript" charset="utf-8"></script>

<script src="/js/class/AjaxHelper.js"></script>
<script src="/js/class/BootstrapController.js"></script>
<script src="/js/class/ContextController.js"></script>
<script src="/js/class/OrgController.js"></script>
<script src="/js/class/OrgsController.js"></script>
<script src="/js/class/OrgsTreeController.js"></script>
<script src="/js/class/PersonsController.js"></script>
<script src="/js/class/HomeController.js"></script>
<script type="text/javascript">
    $(function(){
        window.onerror = function(message, uri, line) {
        	console.log("window on error");
            $(document).trigger('showErrorMessage', "Details: '" + message + "', fileName: " + uri + ", lineNumber: " + line);
            return false;
        }
        homeController = new HomeController(); // global so that new html fragments can find it
        homeController.ready();
        
        $('.fap_menu_clickable_class').click(function() {
            console.log('menu click');
            $('.fap_menu_clickable_class').removeClass("fap_menu_active_class");
            $(this).addClass("fap_menu_active_class");
        });
    });
    
    $(document).bind('showErrorMessage', function(e, message) {
    	try{
    	    $( "#dialog-modal" ).dialog("close");
    	}catch(e){
    		//
    	}

        $("#main_content_table_id").hide();
        $("#error_message").text(message);
        $("#error_message_container").show();
    });
    
</script>
	<table id="main_content_table_id" width="100%" style="border-collapse:collapse;">
		<tr>
			<td colspan="2">
				<table id="page_header_table_id" width="100%">
			        <tr>
			            <td id="banner_icon_id"><a href="/home.html"><img style="border: none;"src="/image/safe.png" alt="The Org Vault" height="64" width="64"/></a></td>
			            <td id="welcome_id" align="left" valign="top">
			                <h2>Org Vault</h2>
			                <div id="message_bar_id" class="fap_message_bar_class" style="display: none"></div>
                            <div id="loading_bar_id" class="fap_message_bar_class" style="display: none" >
                                <img alt="Loading" id="context_throbber" src="/image/ajax-loader-small.gif" height="16px" width="16px"/>
                            </div>
			            </td>
			            
			            <td colspan="2" align="right" valign="top">
                            <div id="header_page_container_id"></div>
                            <div id="pageHelp" title="Click to get information about this page." onclick="homeController.pageHelpClickHandler();">What is going on here? <img src="/image/help.png"/></div>
			            </td>
			        </tr>
			    </table>
			</td>
		</tr>
		<tr>
            <td class="fap_menu_container_td_class" style="width: 175px;">
                <ul id="menu" style="width: 175px;">
                    <li id="menu_item_orgs_id" class="fap_menu_active_class fap_menu_clickable_class" onclick="homeController.orgsClickHandler();">         
				        <a class="css_tooltip">Organizations
				            <span><b></b><i>Add, edit, delete, arrange, assign people.</i><em></em></span>
				        </a>
                    </li>
                    <li id="menu_item_persons_id" class="fap_menu_clickable_class" onclick="homeController.personsClickHandler();">
                        <a  class="css_tooltip">People
                            <span><b></b><i>Add, edit, delete, assign to organizations.</i><em></em></span>
                        </a>
                    </li>
                </ul>
            </td>
			<td class="fap_container_td_class">
				<div id="orgs_container_id" style="display: none" class="fap_container_class"></div> 
                <div id="persons_container_id" style="display: none" class="fap_container_class"></div> 
                <div id="person_container_id" style="display: none" class="fap_container_class"></div> 
                <div id="bootstrap_container_id" style="display: none" class="fap_container_class"></div> 
            </td>
		</tr>
	</table>
	
	
	<div id="dialog-modal">
           <img src="/image/safe.png" height="64" width="64"alt="Org Vault"/> <img src="/image/ajax-loader_big.gif" height="64" width="64" alt="loading"/>
	</div>
	
    <div id="error_message_container" style="display: none">
        <img src="/image/heart-broken.png" height="128px" width="128px" alt="Org Vault Error Page"/>
        <p>Ooops, something has gone wrong! Available details follow.
            If you refresh the page you may be able to continue. Please let the system administrator know if the 
            problem happens again.</p>
        <div id="error_message"></div>
    </div>
</body>
</html>
